<template>
    <div class="container" id="con">
        <div v-for="index in 20" :key="item" :class="'item'+index">内容{{ index }}</div>
    </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
    .container{
        column-count:6;
        column-gap:0;
        padding:10px;
        color:#ffffff;
    }
    .item0{
        break-inside: avoid;  
        width:140px;
        height:100px;
        background-color:red;
    }
    .item1{
        break-inside: avoid;  
        width:140px;
        height:140px;
        background-color:blue;
    }
    .item2{
        break-inside: avoid;  
        width:140px;
        height:190px;
        background-color:green;
    }
    .item3{
        break-inside: avoid;  
        width:140px;
        height:180px;
        background-color:blue;
    }
    .item4{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:black;
    }
    .item5{
        break-inside: avoid;  
        width:140px;
        height:120px;
        background-color:#660000;
    }
    .item6{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:#FF6633;
    }
    .item7{
        break-inside: avoid;  
        width:140px;
        height:130px;
        background-color:#33FF33;
    }
    .item8{
        break-inside: avoid;  
        width:140px;
        height:110px;
        background-color:#AF7AFF;
    }
    .item9{
        break-inside: avoid;  
        width:140px;
        height:130px;
        background-color:#6600FF;
    }
    .item10{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:#FF6633;
    }
    .item11{
        break-inside: avoid;  
        width:140px;
        height:150px;
        background-color:red;
    }
    .item12{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:blue;
    }
    .item13{
        break-inside: avoid;  
        width:140px;
        height:230px;
        background-color:gray;
    }
    .item14{
        break-inside: avoid;  
        width:140px;
        height:150px;
        background-color:black;
    }
    .item15{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:#33FF33;
    }
    .item16{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:green;
    }
    .item17{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:blue;
    }
    .item18{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:black;
    }
    .item19{
        break-inside: avoid;  
        width:140px;
        height:160px;
        background-color:gray;
    }
</style>